
* {
   box-sizing: border-box;
}
body, section, header, div, p, h1, h2, h3, ul, li {
   margin: 0;
   padding: 0;
}
body {
   font-family: 'Open Sans', sans-serif;
   box-sizing: border-box;
   background-color: #e4e7eb;
   font-weight: 300;
}
header {
   margin-left: 20px;
}
h1 {
   text-align: center;
   font-weight: 600;
   font-size: 42px;
   padding: 10px 0;
}

/* add styles here */

/* add font-weights: 800, 600, 400, 300 */
/* add font-sizes:  36px, 24px, 18px, 14px, 12px */
ul span {
   font-weight: 600;
   font-size: 18px;
}

h3 {
   font-weight: 800;
   font-size: 24px;
   padding: 10px 0;
}


/* add 40px padding to the body */
body {
   padding: 40px;
   background-color: #e4e7eb;
}

/* set the width of the section to 910px */
/* the section should have the box-shadow property */
section {
   width: 910px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   padding: 30px 0;
   margin: 0 auto;
}

/* styles for the "price free" class */
.column {
   display: inline-block;
   width: 300px;
   text-align: center;
}

.price.free {
   background-color: #5BB189;
}

.price {
   padding: 10px 0;
   font-weight: 800;
   font-size: 36px;
}

.price span {
   font-weight: 300;
   font-size: 14px;
}


/* set the background color to 2F4F4F and font color to white*/
.featured {
   background-color: #2F4F4F;
   color: white;
}

.price.standard {
   background-color: #4b0082;
}

.price.professional {
   background-color: #EC632A;
}

/* remove the list-style-type from the ul, and make each element box-shadow */
ul {
   list-style-type: none;
   padding: 10px 0;
}

ul li {
   padding: 10px 0;
}

/* For the list items within each column, make every second item a different color usin the nth-child pseudo selector. Use the rgba() function which will darken the underlying background color*/
li:nth-child(2n) {
   background-color: rgba(47, 59, 64, 0.35);
}

/*
make the background color of links in the list items a different color
there will be two colors one of the regular background and one for the hover color
remove the underline from the links
round the corners of the links
 */

section div a {
   background-color: #3A6BA5;
   text-decoration: none;
   color: white;
   border-radius: 3px;
   display: inline-block;
   width: 280px;
   padding: 12px 0;
}

section div a:hover {
   background-color: #2F4F4F;
   text-decoration: none;
   color: white;
   border-radius: 5px;
   width: 280px;
   padding: 12px 0;
}


/* for the confidence div, the list items have a background image (checkmark.png) set the background-size to 24px. */
/* the padding-left and margin of each li will have to be modified so they don't overlap the image */
#confidence {
   width: 910px;
   background-color: #2F4F4F;
   color: white;
   padding: 20px 0;
}

#confidence li {
   background-image: url(checkmark.svg);
   background-size: 24px;
   background-repeat: no-repeat;
   background-position: 10px 0;
   padding-left: 40px;
   margin: 10px 0;
}
